.sidebar-container {
  height: 100%;
  background: #ffffff;
  width: var(--menu-width);
  position: relative;
  z-index: 1000;
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid rgba(0, 0, 0, 0.03);

  &::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(250, 250, 255, 0.5) 0%, rgba(250, 252, 255, 0.3) 100%);
    pointer-events: none;
    z-index: -1;
  }

  &::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(to bottom, 
      rgba(0, 0, 0, 0.02),
      rgba(0, 0, 0, 0.05) 20%,
      rgba(0, 0, 0, 0.02) 100%
    );
  }
}

.logo-container {
  height: 64px;
  padding: 0 8px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(120deg, rgba(244, 246, 255, 0.9) 0%, rgba(250, 251, 255, 0.9) 100%);
  border-bottom: 1px solid rgba(232, 234, 237, 0.6);


  .logo-text {
    display: flex;
    flex-direction: column;

    .text-learn {
      color: #1890ff;
      font-size: 20px;
      font-weight: 800;
      line-height: 1;
      letter-spacing: 1px;
    }


  }
}

.menu-container {
  flex: 1;
  overflow: hidden;
  
  .el-scrollbar {
    height: calc(100vh - 64px);
    
    :deep(.el-scrollbar__bar) {
      &.is-horizontal {
        display: none;
      }
      
      &.is-vertical {
        width: 4px;
        right: 0;
        
        .el-scrollbar__thumb {
          background: rgba(0, 0, 0, 0.1);
          border-radius: 4px;
          
          &:hover {
            background: rgba(0, 0, 0, 0.15);
          }
        }
      }
    }
  }
}

.sidebar-menu {
  border-right: none;
  background: transparent;
  padding: 8px;
  margin: 4px;

  :deep(.el-menu-item),
  :deep(.el-sub-menu__title) {
    height: 50px;
    line-height: 50px;
    color: #626679;
    border-radius: 8px;
    margin: 4px 0;
    font-weight: 500;
    transition: all 0.3s;
    
    &:hover {
      color: #1890ff;
      background: rgba(24, 144, 255, 0.04);
    }
    
    &.is-active {
      color: #1890ff;
      background: rgba(24, 144, 255, 0.08);
      font-weight: 600;
      
      &::after {
        content: '';
        position: absolute;
        right: 16px;
        top: 50%;
        width: 4px;
        height: 24px;
        transform: translateY(-50%);
        background: linear-gradient(to bottom, #1890ff, #52c41a);
        border-radius: 4px;
        opacity: 0.8;
        box-shadow: 0 0 8px rgba(24, 144, 255, 0.2);
      }

      .el-icon {
        color: #1890ff;
      }
    }

    .el-icon {
      margin-right: 12px;
      font-size: 18px;
      transition: all 0.3s;
      opacity: 0.8;
    }
  }

  :deep(.el-sub-menu) {
    .el-menu {
      background: rgba(0, 0, 0, 0.01);
      border-radius: 8px;
      margin: 4px 0;
      padding: 4px;
      
      .el-menu-item {
        min-width: auto;
        border-radius: 6px;
        
        &:hover {
          background: rgba(24, 144, 255, 0.03);
        }
        
        &.is-active {
          background: rgba(24, 144, 255, 0.05);
        }
      }
    }

    &.is-opened {
      > .el-sub-menu__title {
        color: #1890ff;
        background: rgba(24, 144, 255, 0.05);

        .el-icon {
          color: #1890ff;
        }
      }
    }
  }
}